<template>
  <div>
    <el-container>
      <el-header
        ><el-row class="header" type="flex" justify="center">
          <el-col
            :xs="{ span: 24 }"
            :sm="{ span: 24 }"
            :md="{ span: 20 }"
            :lg="{ span: 19 }"
            :xl="{ span: 16 }"
            style="display: flex"
          >
            <div class="head-left">
              <a href="/">
                <img src="../assets/logo.png" alt="logo" srcset="" class="logo"
              /></a>
            </div>
            <div class="head-content">
              <el-menu
                :default-active="activeIndex2"
                class="hidden-xs-only"
                mode="horizontal"
                @select="handleSelect"
                @close="closess"
                @open="opened"
                background-color="#404553"
                text-color="#fff"
                active-text-color="#ffd04b"
                :router=true
              >
                <el-menu-item index="1">处理中心</el-menu-item>
                <el-submenu index="2" >
                  <template slot="title">我的工作台</template>
                  <el-menu-item index="2-1">选项1</el-menu-item>
                  <el-menu-item index="2-2">选项2</el-menu-item>
                  <el-menu-item index="2-3">选项3</el-menu-item>
                  <el-submenu index="2-4" >
                    <template slot="title">选项4</template>
                    <el-menu-item index="2-4-1">选项1</el-menu-item>
                    <el-menu-item index="2-4-2">选项2</el-menu-item>
                    <el-menu-item index="2-4-3">选项3</el-menu-item>
                    <el-submenu index="2-5">
                      <template slot="title">选项4</template>
                      <el-menu-item index="2-5-1">选项1</el-menu-item>
                      <el-menu-item index="2-5-2">选项2</el-menu-item>
                      <el-menu-item index="2-5-3">选项3</el-menu-item>
                    </el-submenu>
                  </el-submenu>
                </el-submenu>
                <el-menu-item index="3">消息中心</el-menu-item>
                <el-menu-item index="4"> 订单</el-menu-item>
              </el-menu>
            </div>
            <div class="head-right">
              <el-badge
                :value="msgCount"
                :hidden="isShow"
                :max="99"
                class="item"
              >
                <el-dropdown placement="top"  >
                  <el-avatar
                    :src="require('@/assets/default.gif')"
                    alt="头像"
                   
                @click.native="test"
                  ></el-avatar>

                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-plus"  
                      >黄金糕</el-dropdown-item
                    >
                    <el-dropdown-item icon="el-icon-circle-plus"
                      >狮子头</el-dropdown-item
                    >
                    <el-dropdown-item icon="el-icon-circle-plus-outline"
                      >螺蛳粉</el-dropdown-item
                    >
                    <el-dropdown-item icon="el-icon-check" 
                      >双皮奶</el-dropdown-item
                    >
                    <el-dropdown-item icon="el-icon-circle-check"
                      >蚵仔煎</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </el-badge>
            </div>
          </el-col>
        </el-row></el-header
      >
      <el-main>
        <el-row :gutter="10" type="flex" justify="center">
          <el-col
            :xs="{ span: 24 }"
            :sm="{ span: 24 }"
            :md="{ span: 20 }"
            :lg="{ span: 14 }"
            :xl="{ span: 12 }"
          >
            <div class="main">
              <el-card> </el-card>
              <el-card>
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
              </el-card>
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
              你好<br />
            </div> </el-col
          ><el-col
            :xs="{ span: 1 }"
            :sm="{ span: 1 }"
            :md="{ span: 1 }"
            :lg="{ span: 5 }"
            :xl="{ span: 4 }"
            class="hidden-md-and-down"
          >
            <div class="right_card">
              <el-card>
                你好 你好 你好 你好 你好 你好 你好 你好 你好 你好 你好 你好 你好
                你好 你好 你好
              </el-card>
              <el-card>
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
                你好<br />
              </el-card></div
          ></el-col>
        </el-row>
      </el-main>
    </el-container>
    <el-backtop target=".el-main"></el-backtop>
  </div>
</template>

<script  scope>
export default {
  name: "Index",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      activeIndex2: "2-3",
      msgCount: 2,
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      // this.$router.push(key)
    },
    opened(key, keyPath) {
      console.log(key, keyPath);
    },
    closess(key, indexPath) {
      console.log(key, indexPath);
    },
    test()
    {
      alert("123");
    }
  },
  computed: {
    isShow: function () {
      return this.msgCount <= 0;
    },
  },
};
</script>

<style>
.header {
  width: 100%;
  height: 60px;
  border-radius: 0;
  background-color: #404553 !important;
  line-height: 60px;
}

.logo {
  vertical-align: middle;
}
.main {
  margin: 0 auto;
  box-sizing: border-box;
  /* width: 700px; */
}

body {
  overflow-x: hidden;
  background-color: #f9f9f9;
}

.el-main::-webkit-scrollbar-thumb {
  border-radius: 5px;
  /* background-color: #F90; */
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.44, rgb(122, 153, 217)),
    color-stop(0.72, rgb(73, 125, 189)),
    color-stop(0.86, rgb(28, 58, 148))
  );
  /* background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); */
}

.el-main::-webkit-scrollbar {
  /* 滚动条整体部分 */
  width: 5px;
  background-color: #f5f5f5;
}

.el-main::-webkit-scrollbar:horizontal {
  height: 10px;
  margin-bottom: 2px;
}

.el-main ::-webkit-scrollbar-track {
  /* 外层轨道 */
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
  border-radius: 10px;
}
.el-card {
  margin: 10px 0px;
}
.right_card {
}
.el-badge__content {
  border: none;
}
.el-dropdown {
  height: 40px;
}
.el-badge {
  height: 40px;
}

.head-left {
  width: 150px;
  justify-items: right;
}
.head-right {
  margin-right: 30px;
  width: 100px;
  text-align: right;
}
.head-content {
  flex: auto;
}

.el-container {
  overflow-x: hidden;
}

.el-header {
  padding: 0px;
}
.el-main {
  overflow-x: hidden;
  padding: 0px;
  height: calc(100vh - 60px);
}
</style>